<template>
    <div class="manage-index">
        <el-row :gutter="30">
            <el-col :span="4" :offset="0">
                <el-form-item :model="params">
                    <el-input v-model="params.productName" placeholder="请输入分类名称"></el-input>
                </el-form-item>
                <el-tree :data="data" :props="defaultProps" default-expand-all :expand-on-click-node="false" @node-click="handleNodeClick"></el-tree>
            </el-col>
            <el-col :span="20" :offset="0">
                <el-form :inline="true">
                    <el-form-item label="产品物料编码">
                        <el-input v-model="params.materialProductCode" placeholder="请输入产品物料编码"></el-input>
                    </el-form-item>
                    <el-form-item label="产品物料名称">
                        <el-input v-model="params.materialProductName" placeholder="请输入产品物料名称"></el-input>
                    </el-form-item>
                    <el-form-item label="入库批次号">
                        <el-input v-model="params.inboundBatchNumber" placeholder="请输入入库批次号"></el-input>
                    </el-form-item>
                </el-form>
                <el-form :inline="true">
                    <el-form-item label="仓库">
                        <el-input v-model="params.warehouseName" placeholder="请输入仓库"></el-input>
                    </el-form-item>
                    <el-form-item label="供应商编号">
                        <el-input v-model="params.supplierCode" placeholder="请输入供应商编号"></el-input>
                    </el-form-item>
                    <el-form-item label="供应商名称">
                        <el-input v-model="params.supplierName" placeholder="请输入供应商名称"></el-input>
                    </el-form-item>
                    <el-form-item label="库存有效期">
                        <el-date-picker v-model="params.validityPeriodOfInventory" align="right" type="date"
                            placeholder="选择日期" :picker-options="pickerOptions">
                        </el-date-picker>
                    </el-form-item>

                    <el-button type="primary" @click="handleSearch" :icon="Search">搜索</el-button>
                    <el-button type="primary" plain @click="paramsReset" :icon="Refresh">重置</el-button>
                </el-form>


                <el-table style="width: 100%" :data="salesorder" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" :data="salesorder" width="50"></el-table-column>
                    <el-table-column prop="materialProductCode" label="产品物料编码" width="120"></el-table-column>
                    <el-table-column prop="materialProductName" label="产品物料名称" width="120"></el-table-column>
                    <el-table-column prop="specificationAndModel" label="规格型号" width="120"></el-table-column>
                    <el-table-column prop="inventoryQuantity" label="在库数量" width="120"></el-table-column>
                    <el-table-column prop="unitName" label="单位" width="120"></el-table-column>
                    <el-table-column prop="inboundBatchNumber" label="入库批次号" width="120"></el-table-column>
                    <el-table-column prop="warehouseName" label="仓库" width="120"></el-table-column>
                    <el-table-column prop="warehouseAreaName" label="库区" width="120"></el-table-column>
                    <el-table-column prop="warehouseLocationName" label="库位" width="120"></el-table-column>
                    <el-table-column prop="supplierCode" label="供应商编号" width="120"></el-table-column>
                    <el-table-column prop="supplierName" label="供应商名称" width="120"></el-table-column>
                    <el-table-column prop="productionOrder" label="生产工单" width="120"></el-table-column>
                    <el-table-column prop="indate" label="入库日期" width="120"></el-table-column>
                    <el-table-column prop="validityPeriodOfInventory" label="库存有效期" width="120"></el-table-column>

                </el-table>
                <!-- 分页组件 -->
                <el-row>
                    <el-col :span="24">
                        <div class="demo-pagination-block">
                            <el-pagination v-model:current-page="params.currentPage" v-model:page-size="params.pageSize"
                                background :default-page-size="params.pageSize" :page-sizes="pageSizes"
                                layout="total,sizes,prev,pager,next,jumper" :total="parseInt(pageResult?.total)"
                                @size-change="handleSizeChange" @current-change="handleCurrentChange">
                            </el-pagination>
                        </div>
                    </el-col>
                </el-row>
                <!-- 分页组件结束 -->

            </el-col>
        </el-row>

    </div>


</template>

<script setup>
import { ref, onMounted } from 'vue';
import { findStock, findMaterial } from '@/apis/xms';
import { Search, Refresh, Delete, Plus, EditPen, Edit } from '@element-plus/icons-vue';

let data = ref([]);
const pageResult = ref({}) // 表格分页数据
const pageSizes = [2, 5, 8, 10] // 分页大小
const salesorder = ref([{
    total: 0,
}]);// 表格数据


//初始化状态（设置默认值）
const params = ref({
    currentPage: 1,
    pageSize: 5,
    productName: '',
    materialProductCode: '',
    materialProductName: '',
    inboundBatchNumber: '',
    warehouseName: '',
    supplierCode: '',
    supplierName: '',
    validityPeriodOfInventory: '',
})

// 参数搜索查询数据
const handleSearch = async () => {
    console.log(params.value)
    pageResult.value = await findStock(params.value)
    salesorder.value = pageResult.value.records


}

/**
 * 处理当前页码变化
 * @param currentPage 当前页码
 */
const handleCurrentChange = (currentPage) => {
    params.value.currentPage = currentPage
    handleSearch() // 数据刷新
}

/**
 * 处理分页大小变化
 * @param size 分页大小
 */
const handleSizeChange = (size) => {
    params.value.pageSize = size
    handleSearch() // 数据刷新
}

//树形菜单点击事件
const defaultProps = {
    children: 'children',
    label: 'materialName',
    value: 'materialId'
}
const handleNodeClick = (dara, node, vnode, event) => {
    params.value.materialId = node.data.materialId;
    handleSearch();
}



onMounted(async () => {
    data.value = await findMaterial();//树形菜单
    pageResult.value = await findStock(params.value) // 获取分页数据
    console.log(pageResult.value)
    salesorder.value = pageResult.value.records // 获取表格数据
    console.log(salesorder.value)
})



const selectable = (row) => {
    return true;
};

const handleClose = () => {
    resetData();
};

const resetData = () => {
    formdata.value = {
        warehouseAreaId: '',
        warehouseAreaCode: '',
        warehouseAreaName: '',
        area: null,
        remark: ''
    };
    title.value = '';
};

const close = () => {
    visible.value = false;
    handleSearch();
};

const paramsReset = () => {
    params.value = {
        currentPage: 1,
        pageSize: 5,
        productName: '',
        materialProductCode: '',
        materialProductName: '',
        inboundBatchNumber: '',
        warehouseName: '',
        supplierCode: '',
        supplierName: '',
        validityPeriodOfInventory: '',
    };
    handleSearch();
};
</script>


<style scoped>
.demo-pagination-block {
    display: flex;
    /* 使其成为 flexbox 容器 */
    justify-content: flex-end;
    /* 将内容对齐到右侧 */
    margin-top: 20px;
}
</style>
